<!-- <style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.left {
    width: 200px;
    background-color: rgb(247, 248, 250);
    height: 100vh;
    overflow-y: scroll;

    li {
        line-height: 50px;
        padding: 0 10px;

    }

    .active {
        border-left: 3px solid rgb(30, 111, 255);
        background-color: #fff;
    }
}

.right {
    flex: 1;
    height: 100vh;
    overflow-y: scroll;

    li {
        line-height: 50px;
        padding: 0 10px;
    }

    .active1 {
        color: rgb(30, 111, 255);
    }
}
</style>
<template>
    <div class="box">
        <div class="left">
            <li v-for="(v, i) in KeshiTap" :key="i" @click="headeTap(v, i)" :class="cunter === i ? 'active' : ''">{{ v
                }}
            </li>
        </div>
        <div class="right">
            <li v-for="(v, i) in KeShi" :key="i" @click="headeTap1(v, i)" :class="cunter1 === i ? 'active1' : ''">{{ v
                }}
            </li>
        </div>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
const show = defineProps(['show'])
const KeShi = ref([])
const TextTap = ref('')
const TextTap1 = ref('')
const KeshiTap = ref<string[]>([])
const cunter = ref(0)
const cunter1 = ref(-1)
axios.get('/api/office/list').then(res => {
    res.data.data.forEach((item: { adminname: string, adminchildrenname: string }) => {
        KeshiTap.value.push(item.adminname)
        KeshiTap.value = [...new Set(KeshiTap.value)].reverse()
        if (item.adminname === '全部') {
            KeShi.value.push(item.adminchildrenname)
        }

    })
})
const headeTap = (v: string, index: number) => {
    TextTap.value = v
    cunter.value = index
    axios.get('/api/office/list').then(res => {
        KeShi.value = []
        res.data.data.forEach((item: { adminname: string, adminchildrenname: string }) => {
            if (item.adminname === v) {
                KeShi.value.push(item.adminchildrenname)
            }
        })
    })
    console.log(index, 111);
}

const headeTap1 = (v: string, index: number) => {
    TextTap1.value = v
    cunter1.value = index
    console.log(index, 2222);
    show.value = false
}


</script> -->

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.left,
.right {
    height: 100vh;
    overflow-y: scroll;

    li {
        line-height: 50px;
        padding: 0 10px;
    }

    .active {
        border-left: 3px solid rgb(30, 111, 255);
        background-color: #fff;
    }

    .active1 {
        color: rgb(30, 111, 255);
    }
}

.left {
    width: 200px;
    background-color: rgb(247, 248, 250);
}
</style>

<template>
    <div class="box">
        <div class="left">
            <li v-for="(v, i) in uniqueKeshiTap" :key="i" @click="headeTap(v, i)" :class="cunter === i ? 'active' : ''">
                {{ v }}</li>
        </div>
        <div class="right">
            <li v-for="(v, i) in KeShi" :key="i" @click="headeTap1(v, i)" :class="cunter1 === i ? 'active1' : ''">{{ v
                }}</li>
        </div>
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, computed } from 'vue';

const show: any = defineProps(['show']);
const KeShi = ref<string[]>([])
const KeshiTap = ref<string[]>([]);
const cunter = ref(0);
const cunter1 = ref(-1);

// 计算属性来确保KeshiTap的唯一性
const uniqueKeshiTap = computed(() => Array.from(new Set(KeshiTap.value)).reverse());

axios.get('/api/office/list').then(res => {
    const data = res.data.data;
    data.forEach((item: { adminname: string; adminchildrenname: string }) => {
        KeshiTap.value.push(item.adminname);
        if (item.adminname === '全部') {
            KeShi.value.push(item.adminchildrenname);
        }
    });
}).catch(error => {
    console.error('Error fetching office list:', error);
});

const headeTap = (v: string, index: number) => {
    cunter.value = index;
    KeShi.value = [];
    axios.get('/api/office/list').then(res => {
        const data = res.data.data;
        KeShi.value = data.filter((item: { adminname: string; }) => item.adminname === v).map((item: { adminchildrenname: any; }) => item.adminchildrenname);
    }).catch(error => {
        console.error('Error fetching office list:', error);
    });
};

const headeTap1 = (v: string, index: number) => {
    cunter1.value = index;
    show.value = false;
};
</script>